<template>
  
  <view class="detail-container">
    <!-- 商品图片 -->
    <scroll-view scroll="y">
    <view class="product-image">
      <u-swiper :list="lists" mode="none" height="750"></u-swiper>
    </view>

    <!-- 商品信息 -->
    <view class="product-info padding margin-top radius-10" style="height: 290rpx;">
      <!-- 价格区域 -->
      <view class="price-section">
        <text class="price-symbol text-xl text-bold color-red">¥</text>
        <text class="price text-bold color-red margin-left-xs">99</text>
        
      </view>

      <!-- 标题区域 -->
      <view class="title-section flex justify-start align-center">
        <view class="title text-lg text-bold color-black" style="width: 540rpx;">【消费券直抵】哈普红油汽车车载玩具跳跳虎摆件</view>
        <view>
       <view class="flex">
         <view class="lr margin-left" @click="show = true">
             <u-icon name="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/fenxiang.png" size="40"></u-icon>
             <view class="text-xs color-grey"> 分享</view>
          
         </view>
           <view class="ri margin-left">
             <u-icon name="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/shoucang.png" size="40"></u-icon>
             <view class="text-xs color-grey">收藏</view>
           </view>
       </view>
        </view>
      </view>
      <view class="foot text-sm color-grey flex justify-between align-center margin-top" style="border-top: 1px solid #EDEDED; height: 80rpx;">
        <view class="left">
          <text> 销量</text>
          <text>490</text>
        </view>
        <view class="right">
          <text> 库存</text>
          <text>1902</text>
        </view>
      </view>
    </view>
      <!-- 优惠信息 -->
      <view class="discount-section flex justify-between align-center padding" style="height: 110rpx;background-color: #ffffff;" @click="shows=true">
        <view class="discount-item">
          <text class="discount-label text-df color-black text-bold">优惠</text>
          <text class="text-xs color-red padding-tb-xs padding-lr-sm radius-10 margin-left" style="background-color:#FFE7E7 ;"> 消费劵抵抗</text>
          <text class="discount-value text-df margin-lr">最多抵10000元</text>
          </view>
          <view class="riht2">
            <u-icon name="arrow-right" class="text-gray" size="20"></u-icon>
          </view>
      </view>

      <!-- 选择区域 -->
    <view class="discount-section flex justify-between align-center padding margin-top" style="height: 110rpx;background-color: #ffffff;" @click="showCategory=true">
      <view class="discount-item">
        <text class="discount-label text-df color-black text-bold">请选择</text>
      
        </view>
        <view class="riht2">
          <text class="text-sm color-grey margin-right" >共有两种规格可选 </text>
          <u-icon name="arrow-right" class="text-gray" size="20"></u-icon>
        </view>
    </view>

      
    
    <view class="discount-section flex justify-between align-center padding margin-top" style="height: 110rpx;background-color: #ffffff;"
    @click="$api.toPage('/sub-home/pages/goods-rate/goods-rate')"
    >
      <view class="discount-item">
        <text class="discount-label text-lg color-black text-bold">暂无评价</text>
      
        </view>
        <view class="riht2">
          <text class="text-sm color-grey margin-right" >查看全部 </text>
          <u-icon name="arrow-right" class="text-gray" size="20"></u-icon>
        </view>
    </view>
    <view class="pictrue" style="width: 100%;">
      <image src="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/banner.png" style="width: 100%;"></image>
    </view>
    <view class="pictrue" style="width: 100%;">
      <image src="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/datu.png" style="width: 100%;"></image>
    </view>
    
    
    
  </scroll-view>
    <!-- 底部按钮 -->
 <view class="footer flex justify-around align-center" style="height: 100rpx;background-color: #ffffff;width:100%;z-index: 999;">
   <view class="leftw flex justify-around align-center padding-left">
     <view class="ti flex flex-direction color-black">
         <u-icon name="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/dianu.png" size="44"></u-icon>
      
       <text class="text-xs"> 店铺</text>
     </view>
     <view class="rrrq flex flex-direction color-black margin-left-lg" style="position: relative;">
       <u-badge type="error" count="7":offset="[0,0]"></u-badge>
      <u-icon name="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/gouwuche.png" size="44"></u-icon>
       <text class="text-xs">购物车</text>
     </view>
   </view>
   <view class="righre flex justify-between align-center">
     <view style="width: 264rpx; height: 80rpx;background-color: #413936;border-radius: 40rpx;color: white;" class="flex align-center justify-around margin-right">加入购物车</view>
     <view style="width: 264rpx; height: 80rpx;background-color:#FF625F;border-radius: 40rpx;color: white;" class="flex align-center justify-around">立即购买</view>
   </view>
 </view>
 <share-popup v-model="show" @share="handleShare"/>
   
   <!-- 优惠弹窗 -->
   <discount-popup v-model="shows"/>
   
   <!-- 规格弹窗 -->
   <sku-popup 
     v-model="showCategory" 
     :goods="goods"
      :skuOptions="skuOptions"
  @add-cart="handleAddCart"
        @buy-now="handleBuyNow"
        @sku-selected="handleSkuSelected"/>
  </view>

</template>

<script>
import SharePopup from './components/SharePopup'
import DiscountPopup from './components/DiscountPopup'
import SkuPopup from './components/SkuPopup'
export default {

components: {
    SharePopup,
    DiscountPopup,
    SkuPopup
  },
  data() {
    return {

            goods: {
              image: 'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/sku.png',
              price: 99,
              stock: 468,
              title: '汽车玩具'
            },
      // 可以添加需要的数据
      show:false,
      shows:false,
      showCategory:false,
      skuOptions: [
              { label: '跳跳虎摆件', value: '4' },
              { label: '维尼熊摆件', value: '5' },
            ],
      lists: [
                {
                  image: "https://env-00jxt1fzew48.normal.cloudstatic.cn/home/banner.png",
                },
                {
                  image: "https://env-00jxt1fzew48.normal.cloudstatic.cn/home/banner.png"
              
                }
              
              ],
    }
  },
  methods: {
     showSkuPopup() {
          this.popupVisible = true
        },
         handleAddCart(payload) {
               console.log('加入购物车', payload);
             },
             handleBuyNow(payload) {
               console.log('立即购买', payload);
             },
             handleSkuSelected(payload) {
               console.log('选中 SKU', payload);
             },
      
    
 
  }
}
</script>

<style scoped>
.detail-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.product-image {
  width: 100%;
  height: 750rpx;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper image {
  width: 100%;
  height: 100%;
}

.product-info {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.price-section {
  display: flex;
  align-items: baseline;
}



.price {

  font-size: 56rpx;
  font-weight: bold;
}

.collect-icon {
  margin-left: auto;
  font-size: 40rpx;
  color: #999;
}

.title-section {
  margin-top: 20rpx;
  background-color: #ffffff;
}

.title {
  font-size: 32rpx;
  color: #333;
  line-height: 1.4;
}
.footer{
  position: fixed;
  bottom: 0;
}

</style>